<!--日期时间类型的查询-->
<template>
  <div style="float:left;width:65px;text-align:center;">
    <find-kind
      v-model="findChoiceKind"
      :findKind="findKind"
      @change="myChange"
    />
  </div>
  <!-- 日期时间 范围查询-->
  <el-date-picker
    v-model="findRange"
    type="datetimerange"
    style="width:300px;"
    :unlink-panels="false"
    range-separator="至"
    start-placeholder="开始日期时间"
    end-placeholder="结束日期时间"
    @change="myChange"
  >
  </el-date-picker>
</template>

<script>
import { defineComponent, ref } from 'vue'
// 引入查询子控件的管理类
// eslint-disable-next-line import/no-absolute-path
import { findItemManage } from '/nf-control-web'
// 查询方式的控件
import selectFindKind from './s-findkind.vue'

// eslint-disable-next-line no-undef
const dateFormat = dayjs // 避免每次使用的时候，都加上面那个注释

export default defineComponent({
  name: 'el-find-item-datetime',
  props: {
    controlId: Number, // 控件ID
    controlType: Number, // 控件类型
    colName: String, // 字段名称
    modelValue: [Array],
    submitFormat: { // 提交给后端的格式化，使用dayjs实现
      type: String,
      default: () => 'YYYY-MM-DD HH:mm:ss' // date：取原生date()；timestamp：取时间戳
    },
    findKind: {
      type: Array,
      default: () => [417]
    }
  },
  components: {
    'find-kind': selectFindKind
  },
  emits: ['update:modelValue', 'my-change'],
  setup (props, context) {
    const {
      findChoiceKind, // 用户选择的查询方式
      findRange, // 查询关键字
      mySubmit
    } = findItemManage(props, context)

    findChoiceKind.value = 417
    // findText.value = [new Date(), new Date()]
    findRange.value = []

    // 提交查询结果
    const myChange = (dt) => {
      const _arr = [
        dateFormat(findRange.value[0]).format(props.submitFormat),
        dateFormat(findRange.value[1]).format(props.submitFormat)
      ]
      mySubmit(_arr)
    }

    return {
      findRange,
      findChoiceKind,
      myChange
    }
  }
})
</script>
